/**
 * 博客列表 create to by doujiabao
 */

import React, { Component } from 'react'

import styles from './index.module.styl'

import routesMap from '@/router'
import http from '@/service/fetch'
import moment from 'moment'

import { Table, Button, Spin, Modal, message } from 'antd'
import Breadcrumb from '@/components/Breadcrumb'

const { confirm } = Modal

class BlogList extends Component {

    constructor(props) {
        super(props)

        this.state = {
            //加载状态
            loading: false,
            //列表
            list: [],
            //see
            visible: false,
            //see html
            outputHTML: null,
        }
    }

    componentDidMount() {
        this.fetchList()
    }

    fetchList = () => {
        http.blogList().then(res => {
            this.setState({
                list: res.data && !!res.data.length ? res.data.map((itm, idx) => {
                    itm.key = idx
                    return itm
                }) : []
            })
        }).catch(err => {
            console.log(err)
        })
    }

    //操作当前状态
    handleBlogState = (record) => {
        const that = this
        confirm({
            title: `确认${+record.state ? '下线' : '上线'}?`,
            onOk() {
                return new Promise((resolve, reject) => {
                    http.blogOnline({
                        id: record.id,
                        state: +record.state ? 0 : 1
                    }).then(res => {
                        message.success(res.data)

                        that.fetchList()

                        resolve(res)
                    }).catch(err => {
                        reject(err)
                    })
                })
            }
        })
    }

    handleEdit = (record) => {
        this.props.history.push(`${routesMap.blogAdd}?id=${record.id}`)
    }

    handleDel = (record) => {
        const that = this

        if (+record.state) return message.error('只能删除未上线状态的博客')

        confirm({
            title: `确认删除?`,
            onOk() {
                return new Promise((resolve, reject) => {
                    http.blogDel({
                        id: record.id
                    }).then(res => {
                        message.success(res.data)

                        that.fetchList()

                        resolve(res)
                    }).catch(err => {
                        reject(err)
                    })
                })
            }
        })
    }

    //取消查看
    handleCancel = () => {
        this.setState({
            visible: false
        }, () => {
            this.setState({
                outputHTML: null
            })
        })
    }

    render() {

        const {
            loading,
            list,
            visible,
            outputHTML
        } = this.state

        const columns = [
            {
                title: 'id',
                dataIndex: 'id',
                key: 'id',
                width: 100
            },
            {
                title: '标题',
                dataIndex: 'title',
                key: 'title',
                width: 200
            },
            {
                title: '内容',
                dataIndex: 'content',
                key: 'content',
                width: 400,
                render: val => {
                    return <Button
                        type="primary"
                        onClick={() => {
                            this.setState({
                                outputHTML: val
                            }, () => {
                                this.setState({
                                    visible: true
                                })
                            })
                        }}
                    >查看</Button>
                }
            },
            {
                title: '发布时间',
                dataIndex: 'releaseTime',
                key: 'releaseTime',
                render: val => {
                    return moment(+val * 1000).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            {
                title: '最后修改时间',
                dataIndex: 'updateTime',
                key: 'updateTime',
                render: val => {
                    return moment(+val * 1000).format('YYYY-MM-DD HH:mm:ss')
                }
            },
            {
                title: '状态操作',
                dataIndex: 'operation',
                key: 'operation',
                render: (val, record, row) => {
                    return <React.Fragment>
                        <div>
                            <Button type="primary" danger={!+record.state} onClick={() => { this.handleBlogState(record) }}>
                                {!+record.state ? '未上线' : '已上线'}
                            </Button>
                        </div>
                        <div className={styles.marginTop}>
                            <Button disabled={+record.state} onClick={() => { this.handleEdit(record) }}>
                                编辑
                            </Button>
                        </div>
                        <div className={styles.marginTop}>
                            <Button disabled={+record.state} danger onClick={() => { this.handleDel(record) }}>
                                删除
                            </Button>
                        </div>
                    </React.Fragment>

                }
            },
        ]

        return (<div>
            <Spin spinning={loading}>
                <Breadcrumb
                    pathSnippets={[
                        '博客管理',
                        '博客列表'
                    ]}
                    className={styles.breadcrumb}
                />
                <Table
                    dataSource={list}
                    columns={columns}
                />
            </Spin>
            <Modal
                title="预览"
                visible={visible}
                maskClosable={false}
                footer={null}
                onCancel={this.handleCancel}
                width={1000}
            >
                <div className={styles.preview} dangerouslySetInnerHTML={{ __html: outputHTML }}></div>
            </Modal>
        </div >)
    }

}

export default BlogList